<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Post Request Form</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script th:inline="javascript">
        /*<![CDATA[*/
        $(document).ready(function () {
            $("#submitBtn").click(function () {
                var users = [];
                let input = $("input[name='users']").length;
                console.log(input)
                $("input[name='users']").each(function () {
                    var user = {};
                    user.name = $(this).find("input[name='name']").val();
                    user.email = $(this).find("input[name='email']").val();
                    users.push(user);
                });
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    url: "/submit",
                    data: JSON.stringify(users),
                    dataType: 'json',
                    cache: false,
                    timeout: 600000,
                    success: function (data) {
                        console.log("SUCCESS : ", data);
                    },
                    error: function (e) {
                        console.log("ERROR : ", e);
                    }
                });
            });
        });
        /*]]>*/
    </script>
</head>
<body>
<h1>Post Request Form</h1>
<form>
    <div th:each="user, iterStat : ${users}" th:object="${user}" th:field="*{users[__${iterStat.index}__]}">
        <input type="text" th:field="*{name}" name="name" required>
        <input type="email" th:field="*{email}" name="email" required>
    </div>
    <button type="button" id="submitBtn">Submit</button>
</form>
</body>
</html>